import React, { useEffect, useState, Suspense } from 'react'
import { AppstoreOutlined, MailOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons';
import { useLocation, useNavigate, Outlet } from 'react-router-dom'
import { Menu, Avatar, Modal, Button } from 'antd';

import styles from './index.module.css'

import PageLoading from '../../component/pageLoading'
import { removeAllCache } from '../../utils/cache'

//跳转工具类
import { jumpTo } from '../../jump'

const items = [{
    key: 'sub1',
    label: 'Navigation One',
    icon: <MailOutlined />,
    children: [
        {
            key: 'g1',
            label: 'Item 1',

        },
        {
            key: 'g2',
            label: 'Item 2',
        },
    ],
},
{
    key: 'sub2',
    label: 'Navigation Two',
    icon: <AppstoreOutlined />,
    children: [
        {
            key: 'g3',
            label: 'Item 3',
        },
        {
            key: 'g4',
            label: 'Item 4',
        },
        {
            key: 'g5',
            label: 'Item 5',
            children: [
                {
                    key: '1',
                    label: 'Option 1',
                },
                {
                    key: '2',
                    label: 'Option 2',
                },
            ],
        },
    ],
},
{
    key: 'sub3',
    label: 'Navigation Three',
    icon: <SettingOutlined />,
    children: [
        {
            key: 'g6',
            label: 'Item 6',
        },
        {
            key: 'g7',
            label: 'Item 7',
        },
        {
            key: 'g8',
            label: 'Item 8',
        },
        {
            key: 'g9',
            label: 'Item 9',
        },
    ],
},
{
    key: 'sub4',
    label: 'Navigation Four',
    icon: <SettingOutlined />,
    children: [
        {
            key: 'g10',
            label: 'Item 10',
        },
        {
            key: 'g11',
            label: 'Item 11',
        },
        {
            key: 'g12',
            label: 'Item 12',
        },
        {
            key: 'g13',
            label: 'Item 13',
        },
    ],
},];

function Main() {

    //[]空数组相当于componentDidMount
    useEffect(() => {
        initData()
      
        return () => {

        }
    }, []);

    function initData() {

    }

    const [isModalOpen, setIsModalOpen] = useState(false);

    const [stateOpenKeys, setStateOpenKeys] = useState(['sub1']);
    const [stateSelectedKeys, setStateSelectedKeys] = useState(['g1']);
    //导航
    let navigate = useNavigate()
    //监听地址栏变化
    let location = useLocation();

    //点击展开组item
    function onOpenGroupItem(openKeys) {
        //当前打开的组item->默认选中第一个
        const currentOpenKey = openKeys.find((key) => stateOpenKeys.indexOf(key) === -1);
        if (currentOpenKey !== undefined) {
            //默认选中第一项子item(根据当前展开的key寻找)
            for (let i = 0; i < items.length; i++) {
                let temp = items[i];
                let tempKey = temp.key;
                if (tempKey === currentOpenKey) {
                    //找到就返回
                    let firstChildKey = temp.children[0].key;
                    //展开组item
                    setStateOpenKeys([currentOpenKey]);
                    //选中子item
                    setStateSelectedKeys([firstChildKey]);
                    return
                } else {
                    //查找子item有无该key
                    let childrenTempArr = temp.children;
                    //遍历子item
                    childrenTempArr.forEach(function (element) {
                        if (element.key === currentOpenKey) {
                            //找到就返回
                            let firstChildKey = element.children[0].key;
                            //展开组item 嵌套两层 需展开组+子组
                            setStateOpenKeys([tempKey, currentOpenKey]);
                            //选中子item
                            setStateSelectedKeys([firstChildKey]);
                            return
                        } else {
                            //不做处理 只嵌套两层
                        }
                    });
                }
            }
        } else {
            setStateOpenKeys(openKeys);
        }
    }

    function clickChildItem(e) {
        const childItemKey = e.key;
        setStateSelectedKeys([childItemKey])
        switch (childItemKey) {
            //推送情况
            case 'g1':
                jumpTo(navigate, '/main/board', true, null)
                break;

            //tese01
            case 'g3':
                jumpTo(navigate, '/main/test01', true, null)
                break;

            //tese02
            case 'g2':
                jumpTo(navigate, '/main/test02', true, null)
                break;

            default:
                break;
        }

    }

    function clickAvatar() {
        setIsModalOpen(true);
    }

    function handleOk() {
        //清空所有缓存数据
        removeAllCache();
        setIsModalOpen(false);
        //jumpTo(navigate, '/login', true, null)
        navigate('/login', { replace: true })

    };
    function handleCancel() {
        setIsModalOpen(false);
    };

    function listenUrl() {
        console.log('地址栏变化了：', location.pathname);
    };


    return (
        <div className={styles.root}>
            {listenUrl()}
            <div className={styles.menuBox}>
                <Menu
                    className={styles.menu}
                    items={items}
                    onOpenChange={onOpenGroupItem}
                    openKeys={stateOpenKeys}
                    selectedKeys={stateSelectedKeys}
                    mode="inline"
                    onClick={clickChildItem}
                />
            </div>
            <div className={styles.rightSide}>
                <div className={styles.head}>
                    <p>Current location: {location.pathname}</p>
                    <Avatar onClick={clickAvatar} className={styles.avatar} size={32} icon={<UserOutlined />} />
                    <Modal title="提示！" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                        <p>确认退出登录吗</p>
                    </Modal>
                </div>
                <Suspense fallback={<PageLoading />}>
                    <Outlet ></Outlet>
                </Suspense>
            </div>

        </div>
    )
}

export default Main;
